<template>
	<view class="u-select-ref">
		<view class="u-input" @click="clickEvent">
			<u--input v-model="inputvalue" disabled disabledColor="#ffffff" placeholder="请输入" border="none"></u--input>
		</view>
		<u-popup :show="show" @close="close" @open="open" :round="10" >
			<view class="u-popup-content">
				<u-search bgColor="#fff" borderColor="#dfe2e5" placeholder="输入编码/名称搜索"
					v-model="keyword" :showAction="false" @clear="clearSearch" @change="searchChange"></u-search>
				<view class="u-list-container">
					<u-list v-show="localdata.length != 0" @scrolltolower="scrolltolower" class="u-list-scroll" height="500px">
						<u-list-item class="u-list-item-container" v-for="(item, index) in localdata" :key="index">
							<u-cell :title="item.refname" size="large" :border="true" :label="item.refcode"
								@click="onchange(item.refid)"></u-cell>
						</u-list-item>
					</u-list>
					<u-empty mode="search" v-show="localdata.length == 0"></u-empty>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import props from './props.js';
	export default {
		name: "gf-select-ref",
		data() {
			return {
				keyword: '',
				inputvalue: this.processedValue,
				initlocaldata: [],
				localdata: [],
				show: true
			};
		},
		props: {
			value: {
				type: [String, Object],
				default: function() {
					return '';
				}
			},
			refType: {
				type: String,
				default: function() {
					return '';
				}
			},
			docType: {
				type: String,
				default: function() {
					return '';
				}
			},
			refData: {
				type: Array,
				default: function() {
					return [];
				}
			},
			textfield: {
				type: String,
				default: function() {
					return 'refname';
				}
			},
			valuefield: {
				type: String,
				default: function() {
					return 'refid';
				}
			},
			valuemode: {
				type: String,
				default: function() {
					return 'single';
				}
			},
			placeholder: {
				type: String,
			}
		},
		watch: {
			/**
			 * @param {Object} newValue 更新后的props
			 * 监听props中的value值变化，并赋值给自身数据属性inputvalue
			 */
			value(newValue) {
				if (typeof newValue === 'object') {
					this.inputvalue = newValue['refid']
				} else {
					let temp = this.localdata;
					let refname = ''
					if (temp) {
						temp.map(item => {
							if (item.refid == this.value) {
								refname = item.refname
							}
						})
					}
					this.inputvalue = refname;
				}
			}
		},
		computed: {
			/**
			 * 处理value值
			 */
			processedValue() {
				if (typeof this.value === 'object') {
					return this.value['refid']
				} else {
					let temp = this.localdata;
					let refname = ''
					if (temp) {
						temp.map(item => {
							if (item.refid == this.value) {
								refname = item.refname
							}
						})
					}
					return refname
				}
			},
			/**
			 * 从缓存中获取localdata的值
			 */
			processedLocaldata() {
				const storageData = uni.getStorageSync(this.$props.docType);
				let localdata = storageData;
				/* if (storageData && JSON.stringify(storageData) != '{}') {
					storageData.map((item) => {
						let obj = {
							text: item[this.$props.textfield],
							value: item[this.$props.valuefield]
						};
						localdata.push(obj);
					});
				} */
				return localdata;
			}
		},
		methods: {
			clearSearch() {
				this.localdata = this.initlocaldata;
			},
			searchChange(keyWord) {
				uni.$u.debounce(this.search(keyWord), 1000)
			},
			search(keyWord) {
				let searchArr = [];
				if (this.initlocaldata && keyWord) {
					for (let i = 0; i < this.initlocaldata.length; i++) {
						let obj = this.initlocaldata[i];
						if (obj.refcode && obj.refcode.includes(keyWord)) {
							searchArr.push(obj)
							continue;
						}
						if (obj.refname && obj.refname.includes(keyWord)) {
							searchArr.push(obj)
							continue;
						}
					}
				} else {
					searchArr = this.initlocaldata
				}
				this.localdata = searchArr;
			},
			onchange(value) {
				this.inputvalue = value;
				this.show = false;
				this.$emit('input', this.inputvalue);
			},
			scrolltolower() {
				// this.$msg('没有更多内容');
			},
			close() {
				this.show = false
				this.keyword = '';
				this.loaddata()
			},
			open() {
				this.show = true
			},
			clickEvent(e) {
				this.open()
			},
			loaddata() {
				if (this.$props.refData && this.$props.refData.length != 0) {
					this.localdata = this.$props.refData;
				} else {
					this.localdata = this.processedLocaldata;
				}
				this.initlocaldata = this.localdata;

				this.inputvalue = this.processedValue;
			}
		},
		created() {
			this.loaddata();
		},

	}
</script>

<style lang="scss">
	.u-select-ref {
		width: 100%;

		.u-list-container {
			height: 500px;
			margin-top: 15rpx;

			.u-list-item-container {
				// margin: 5px 0px;
			}
		}

		.u-list-scroll {
			// height: 500px !important;
		}

		.u-popup-content {
			margin-top: 20rpx;
		}
	}
</style>